<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="page"  uri="http://www.aptech.com/pager"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>后台管理系统</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
	content="Charisma, a fully featured, responsive, HTML5, Bootstrap admin template.">
<meta name="author" content="Muhammad">

<link id="bs-css" href="css/bootstrap-cerulean.css" rel="stylesheet">
<script src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/My97DatePicker/WdatePicker.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.flot.categories.js"></script>
<style type="text/css">
body {
	padding-bottom: 40px;
}
.sidebar-nav {
	padding: 9px 0;
}
.detailTD{text-align:right;width:180px;height:30px;}
.demo-container {
	box-sizing: border-box;
	width: 1070px;
	height: 480px;
	padding: 20px 15px 15px 15px;
	margin: 7px auto 7px auto;
	border: 1px solid #ddd;
	background: #fff;
	background: linear-gradient(#f6f6f6 0, #fff 50px);
	background: -o-linear-gradient(#f6f6f6 0, #fff 50px);
	background: -ms-linear-gradient(#f6f6f6 0, #fff 50px);
	background: -moz-linear-gradient(#f6f6f6 0, #fff 50px);
	background: -webkit-linear-gradient(#f6f6f6 0, #fff 50px);
	box-shadow: 0 3px 10px rgba(0,0,0,0.15);
	-o-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
	-ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
	-moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
	-webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
.demo-placeholder {
	width: 100%;
	height: 100%;
	font-size: 14px;
	line-height: 1.2em;
}
</style>
<!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
	  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

<link rel="shortcut icon" href="img/favicon.ico">
</head>
<body>
<jsp:include page="/referencesHtml/jsAndCss.html"></jsp:include>
	<s:include value="/header.jsp" />
	<!-- topbar ends -->
	<div class="container-fluid">
		<div class="row-fluid">
			<s:include value="/left.jsp" />
			<div id="content" class="span10">
				<!-- content starts -->
				<div>
					<ul class="breadcrumb">
						<li><a href="index">主页</a> <span class="divider">/</span></li>
						<li><a href="#">快递公司数据统计</a></li>
					</ul>
				</div>
					<div id="dataContent">
					<div class="sortable row-fluid ui-sortable">
						<div class="box span12">
							<div class="box-header well" data-original-title="" id="betweenTime">
								<h2>
									<i class="icon-edit"></i> 快递公司使用率统计图
								</h2>
							</div>
							<div class="demo-container">
								<div id="placeholder" class="demo-placeholder"></div>
							</div>
						</div>
					</div>
				<div class="row-fluid sortable ui-sortable">
					<div class="box span12" style="margin-bottom: 30px;margin-top:0px;">
						<div class="box-header well" data-original-title="">
							<h4><i class="icon-edit"></i>快递公司使用率统计列表</h4>
						</div>
						<div class="box-content">
						<div class="row-fluid packagepages" style="margin-top:20px;">
						<page:page pages="${companyData.allPage}" url="statistics!terminalCompanyData" param="&startstime=${startstime}&endtime=${endtime}&terminalID=${terminalID}"
										curpage="${companyData.curpage}" pageIndex="7" total="${companyData.total}" pageSize="${companyData.pageSize }"/>
							<table
								class="table table-striped table-bordered bootstrap-datatable dataTable" id="dateTable">
								<thead>
									<tr role="row">
										<th class="sorting_asc" role="columnheader" tabindex="0"
											aria-controls="DataTables_Table_0" rowspan="1" colspan="1">序号</th>
										<th class="sorting_asc" role="columnheader" tabindex="0"
											aria-controls="DataTables_Table_0" rowspan="1" colspan="1">快递公司</th>
										<th class="sorting" role="columnheader" tabindex="0"
											aria-controls="DataTables_Table_0" rowspan="1" colspan="1">包裹总数</th>
										<th class="sorting" role="columnheader" tabindex="0"
											aria-controls="DataTables_Table_0" rowspan="1" colspan="1">所占比率</th>
									</tr>
								</thead>
		
								<tbody>
									<s:if test="companyData.list.size()==0">
								    	<tr class="odd">
										  <td colspan="9">=_= 没有找到任何记录！</td>
										</tr>
								       </s:if>
									<s:iterator value="companyData.list" var="data" status="st">
										<tr class="odd">
											<td class="center "><s:property value="#st.index+1" /></td>
											<td class="center company"><s:property value="#data.companyName" /></td>
											<td class="center parcelNum"><s:property value="#data.parcelNum" /></td>
											<td class="center percent"><s:property value="#data.percent" /></td>
										</tr>
									</s:iterator>
								</tbody>
							</table>
							<input type="hidden" value="${companyData.curpage}" id="curpage"/><input type="hidden" value="${companyData.pageSize }" id="pageSize"/>
							<page:page pages="${companyData.allPage}" url="statistics!terminalCompanyData" param="&startstime=${startstime}&endtime=${endtime}&terminalID=${terminalID}"
										curpage="${companyData.curpage}" pageIndex="7" total="${companyData.total}" pageSize="${companyData.pageSize }"/>
							</div>
						</div>
					</div>
				</div>
				</div>
			</div>
		</div>
		<hr>
		<s:include value="/footer.jsp" />
	</div>
	<!-- jQuery -->
	<script src="js/layer/layer.js"></script>  
	<script type="text/javascript">
	$(function() {
	    var company = $(".company");
	    var percent = $(".percent");
	    var parcelNum = $(".parcelNum");
	    var size = $("#pageSize").val();
	    var barData = [];
	    for (var i = 0; i < size; i++) {
	        barData.push([$(company[i]).html(), $(percent[i]).html()]);
	    }
	    $.plot("#placeholder", [{
	        data: barData,
	        bars: {
	            show: true,
	            barWidth: 0.6,
	            align: "center"
	        }
	    },
	    {
	        data: barData,
	        label: "包裹总数",
	        lines: {
	            show: true
	        },
	        points: {
	            show: true
	        }
	    }], {
	        xaxis: {
	            mode: "categories",
	            tickLength: 0
	        },
	        grid: {
	            hoverable: true,
	            clickable: true
	        }
	    });
	    $("<div id='tooltip'></div>").css({
	        position: "absolute",
	        display: "none",
	        border: "1px solid #fdd",
	        padding: "2px",
	        "background-color": "#fee",
	        opacity: 0.80
	    }).appendTo("body");

	    $("#placeholder").bind("plothover",
	    function(event, pos, item) {
	        if (item) {
	            var x = item.datapoint[0];
	            $("#tooltip").html($(parcelNum[x]).html()).css({
	                top: item.pageY + 5,
	                left: item.pageX + 5
	            }).fadeIn(200);
	        } else {
	            $("#tooltip").hide();
	        }
	    });
	});
	</script>
</body>
</html>